<template>

  <NuxtLayout name="default-layout">
    <template #main>
      <div class="min-h-dvh">
        <div class="hero min-h-min mt-36">
          <div class="hero-content flex-col lg:flex-row-reverse min-w-full">
            <div class="card bg-base-100 w-full max-w-sm shrink-0 shadow-2xl">
              <div class="card-body">
                <div class="flex flex-col items-center gap-2">
                  <img src="../assets/images/login-welcome.jpeg" width="60" class="rounded-full">
                  <h1 class="text-2xl font-bold text-black">酒店管理系统</h1>
                </div>
                <div class="form-control">
                  <label class="label">
                    <span class="label-text">账号</span>
                  </label>
                  <input type="text" placeholder="请输入账号" v-model="loginForm.account" class="input input-bordered"/>
                </div>
                <div class="form-control">
                  <label class="label">
                    <span class="label-text">密码</span>
                  </label>
                  <input type="password" placeholder="请输入密码" v-model="loginForm.password"
                         class="input input-bordered" @keydown.enter="doLogin()"/>
                  <label class="label">
                    <a href="/forgotpwd" class="label-text-alt link link-hover" target="_self">忘记密码？</a>
                    <div class="form-control">
                      <label class="label cursor-pointer">
                        <!--                        <input type="checkbox" checked="checked" class="checkbox checkbox-primary"/>-->
                        <input type="checkbox" v-model="rememberMe" class="checkbox checkbox-primary"/>
                        <span class="label-text">记住我</span>
                      </label>
                    </div>
                  </label>
                </div>
                <div class="form-control mt-6">
<!--                  <button class="btn btn-secondary w-fit" @click="toRegister()">注册</button>-->
<!--                  <div></div>-->
<!--                  <div></div>-->
                  <button class="btn btn-primary w-full" @click="doLogin()">登录</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </NuxtLayout>

</template>

<script setup>
import {httpPost} from "../utils/http/http-helper.js";
import userStore from '../store/user'
import auth from "../utils/auth/index.js";
import {notificationError} from "../utils/notification/index.js";

const route = useRoute()
const router = useRouter()
const useUserStore = userStore()
const backUrl = route.query.back_url
console.log('backUrl=' + backUrl)

/**
 * 登录表单
 */
const loginForm = ref({
  account: '',
  password: '',
})
// 记住我
const rememberMe = ref(false)

if(process.client){
  // 如果勾选了记住密码 自动填充账号密码
  const rememberMeObj = auth.getRememberMeObj()
  loginForm.value.account = rememberMeObj.account
  loginForm.value.password = rememberMeObj.password
  rememberMe.value = rememberMeObj.rememberMe
}


/**
 * 登录
 */
function doLogin() {
  httpPost('/api/auth/login', loginForm.value).then(resp => {
    console.log(resp)
    if (!resp.success) {
      notificationError(resp.msg)
      return
    }
    // 持久化登录凭证以及登录用户信息
    useUserStore.setAuthInfo(resp.data.token, resp.data.user)
    if (rememberMe.value) {
      // 持久化记住密码
      useUserStore.setRememberMe(loginForm.value.account, loginForm.value.password)
    } else {
      // 如果没勾选记住密码 清空本地持久化记住密码的数据
      useUserStore.clearRememberMe()
    }
    const role = resp.data.user.role
    if (role === 0 || role === 1) {
      // 管理员
      router.push('/manage')
    } else if (role === 2) {
      // 普通用户
      router.push('/')
    }
  })
}

/**
 * 跳转到注册页面
 */
function toRegister(){
  router.push('/register')
}
</script>

<style scoped>

</style>